<template>
  <div class="paging" ref="pagingContent" v-show="total > 10">
    <div class="paging_left">
      共为您找到<span>{{ total }}</span
    >条
    </div>
    <div class="paging_content">
      <el-pagination
        background
        :current-page="value"
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="paging_right">
      跳转至<input
      type="number"
      :value="value"
      ref="Jump_input"
      @blur="Jump_event"
    />页
    </div>
  </div>
</template>

<script>
  export default {
    name: "paging",
    data() {
      return {
        // 总页数
        total: 0,
        // 当前页
        value: 1
      };
    },
    props: {
      pageNo: {
        type: Number,
        default: 1
      }
    },
    watch: {
      pageNo: {
        immediate: true, //很重要！！
        handler() {
          this.value = this.pageNo;
        }
      }
    },
    methods: {
      // 总数
      totalValue(value) {
        this.total = value;
        if (value == 0 || value < 11) {
          this.$refs.pagingContent.style.display = "none";
        } else {
          this.$refs.pagingContent.style.display = "block";
        }
      },
      // 当前页传给父
      CurrentValue() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        window.pageYOffset = 0;
        this.$emit("CurrentPage", this.value);
      },
      // 当前页改变
      handleCurrentChange(val) {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        window.pageYOffset = 0;
        this.value = val;
        this.CurrentValue();
      },
      // 跳转到多少页
      Jump_event() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
        window.pageYOffset = 0;
        var that = this;
        if (that.$refs.Jump_input.value == 0) {
          this.$message.error("跳转页数不允许为0");
        } else if (that.$refs.Jump_input.value > Math.ceil(that.total / 10)) {
          this.$message.error("跳转页数超过最大页数");
          // that.$refs.Jump_input.value = 1;
        } else {
          that.value = Number(that.$refs.Jump_input.value);
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  .paging_left {
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);

    span {
      color: rgb(68, 162, 255);
      margin: 0px 6px;
    }
  }

  .paging_content {
    margin-left: 10px;
    margin-right: 18px;
    display: inline-block;
    vertical-align: top;
  }

  .paging_right {
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);

    input {
      width: 40px;
      height: 28px;
      box-sizing: border-box;
      border: 1px solid rgb(218, 234, 245);
      background-color: rgb(255, 255, 255);
      text-align: center;
      margin: 0px 10px;
      -moz-appearance: textfield;

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
    }
  }
</style>
<style>
  /* element 分页*/
  .paging .btn-prev,
  .paging .btn-next,
  .paging .number,
  .paging .more {
    background-color: #fff !important;
    font-weight: normal !important;
    border: 1px solid #daeaf5 !important;
  }

  .paging .active {
    background-color: #fff !important;
    color: #44a2ff !important;
    border: 1px solid #44a2ff !important;
  }
</style>
